<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

	<title>Canvas Admin - Activity Stream</title>

	<meta charset="utf-8" />
	<meta name="description" content="" />
	<meta name="author" content="" />		
	<meta name="viewport" content="width=device-width,initial-scale=1" />
  
		
	<link rel="stylesheet" href="stylesheets/all.css" type="text/css" />
	
	<!--[if gte IE 9]>
	<link rel="stylesheet" href="stylesheets/ie9.css" type="text/css" />
	<![endif]-->
	
	<!--[if gte IE 8]>
	<link rel="stylesheet" href="stylesheets/ie8.css" type="text/css" />
	<![endif]-->
	<link rel="stylesheet" href="stylesheets/sample_pages/stream.css" type="text/css" />

</head>

<body>

<div id="wrapper">
	
	<div id="header">
		<h1><a href="dashboard.html">Canvas Admin</a></h1>		
		<a href="javascript:;" id="reveal-nav">
			<span class="reveal-bar"></span>
			<span class="reveal-bar"></span>
			<span class="reveal-bar"></span>
		</a>
	</div> <!-- #header -->
	
	<div id="search">
		<form>
			<input type="text" name="search" placeholder="Search..." id="searchField" />
		</form>		
	</div> <!-- #search -->
	
	<div id="sidebar">		
		
		<ul id="mainNav">			
			<li id="navDashboard" class="nav">
				<span class="icon-home"></span>
				<a href="dashboard.html">Dashboard</a>				
			</li>
						
			<li id="navPages" class="nav active">
				<span class="icon-document-alt-stroke"></span>
				<a href="javascript:;">Sample Pages</a>				
				
				<ul class="subNav">
					<li><a href="invoice.html">Invoice</a></li>
					<li><a href="support.html">Support</a></li>
					<li><a href="people.html">People Directory</a></li>
					<li><a href="calendar.html">Calendar</a></li>
					<li><a href="stream.html">Stream</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="reports.html">Reports</a></li>
				</ul>						
			</li>	
			
			<li id="navForms" class="nav">
				<span class="icon-article"></span>
				<a href="javascript:;">Form Elements</a>
				
				<ul class="subNav">
					<li><a href="forms.html">Layouts & Elements</a></li>
					<li><a href="forms-validations.html">Validations</a></li>					
				</ul>	
			</li>
			
			<li id="navType" class="nav">
				<span class="icon-info"></span>
				<a href="typography.html">Typography</a>	
			</li>
			
			<li id="navGrid" class="nav">
				<span class="icon-layers"></span>
				<a href="grids.html">Grid Layout</a>	
			</li>
			
			<li id="navTables" class="nav">
				<span class="icon-list"></span>
				<a href="tables.html">Tables</a>	
			</li>
			
			<li id="navButtons" class="nav">
				<span class="icon-compass"></span>
				<a href="buttons.html">Buttons & Icons</a>	
			</li>
			
			<li id="navInterface" class="nav">
				<span class="icon-equalizer"></span>
				<a href="interface.html">Interface Elements</a>	
			</li>
			
			<li id="navCharts" class="nav">
				<span class="icon-chart"></span>
				<a href="charts.html">Charts & Graphs</a>
			</li>
			
			<li id="navMaps" class="nav">
				<span class="icon-map-pin-fill"></span>
				<a href="maps.html">Map Elements</a>
			</li>
			
			<li class="nav">
				<span class="icon-denied"></span>
				<a href="javascript:;">Error Pages</a>
				
				<ul class="subNav">
					<li><a href="error-401.html">401 Page</a></li>
					<li><a href="error-403.html">403 Page</a></li>
					<li><a href="error-404.html">404 Page</a></li>	
					<li><a href="error-500.html">500 Page</a></li>	
					<li><a href="error-503.html">503 Page</a></li>					
				</ul>	
			</li>
		</ul>
		
				
	</div> <!-- #sidebar -->
	
	<div id="content">		
		
		<div id="contentHeader">
			<h1>Activity Stream</h1>
		</div> <!-- #contentHeader -->	
		
		<div class="container">
			
			<div class="row">
				<div class="grid-16">

					<form id="activityStreamForm">	
						<h3>Add Item</h3>

						<textarea name="activityPost" placeholder="Share images, links, polls and files with other members."></textarea>

						<div id="activityStreamFormActions">

							<div class="streamTypes">
								Attach:
								<a href="javascript:;" class="streamType streamTypeFile tooltip" title="Attach Files">Files</a>
								<a href="javascript:;" class="streamType streamTypeLink tooltip" title="Attach Link">Link</a>
								<a href="javascript:;" class="streamType streamTypePoll tooltip" title="Attach Poll">Poll</a>
							</div>

							<div class="streamShare">
								<button class="btn btn-small btn-primary">Share</button>
							</div>
						</div>

						<div class="clear"></div>
					</form>

					<div class="activityStreamRow">
						<table class="activityTable">

							<tr>
								<td class="activityStreamAvatarTd">
									<img src="images/stream/defaultavatar_small.png" alt="Profile" />	
								</td>

								<td class="tdDetails">
									<p class="activityStreamWho"><a href="javascript:;">John Doe</a> posted the question: <a href="javascript:;">Who can I call to get a new parking pass for the Rowan buidling?</a></p>
									<p class="streamAnswer">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

									<p class="streamAnswer">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

									<div class="activityStreamActions">
										<a href="javascript:;">Comment</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;">Like</a>										
									</div>
								</td>						
							</tr>						
						</table>
					</div> <!-- .activityStreamRow -->

					<div class="activityStreamRow">
						<table class="activityTable">

							<tr>
								<td class="activityStreamAvatarTd">
									<img src="images/stream/defaultavatar_small.png" alt="Profile" />	
								</td>

								<td class="tdDetails">
									<p class="activityStreamWho"><a href="javascript:;">John Doe</a> posted the <strong>4 files</strong>: <a href="javascript:;">Annual Reports</a></p>
									<p class="streamFile"><a href="javascript:;">Annual Report 2007</a> - annual_report_2007.pdf</p>
									<p class="streamFile"><a href="javascript:;">Annual Report 2008</a> - annual_report_2008.pdf</p>
									<p class="streamFile"><a href="javascript:;">Annual Report 2009</a> - annual_report_2009.pdf</p>
									<p class="streamFile"><a href="javascript:;">Annual Report 2010</a> - annual_report_2010.pdf</p>

									<div class="activityStreamActions">
										<a href="javascript:;">Comment</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;">Like</a>										
									</div>
								</td>						
							</tr>						
						</table>
					</div> <!-- .activityStreamRow -->

					<div class="activityStreamRow">
						<table class="activityTable">

							<tr>
								<td class="activityStreamAvatarTd">
									<img src="images/stream/defaultavatar_small.png" alt="Profile" />	
								</td>

								<td class="tdDetails">
									<p class="activityStreamWho"><a href="javascript:;">John Doe</a> uploaded a new image: <a href="javascript:;">placeholder.jpg</a></p>

									<p class="streamImage">
										<img src="images/stream/imagePlaceholder_330x230.gif" alt="Placeholder">
									</p>

									<div class="activityStreamActions">
										<a href="javascript:;">Comment</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;">Like</a>										
									</div>
								</td>						
							</tr>						
						</table>
					</div> <!-- .activityStreamRow -->

					<div class="activityStreamRow">
						<table class="activityTable">

							<tr>
								<td class="activityStreamAvatarTd">
									<img src="images/stream/defaultavatar_small.png" alt="Profile" />	
								</td>

								<td class="tdDetails">
									<p class="activityStreamWho"><a href="javascript:;">John Doe</a> bookmarked a page on Delicious: <a href="javascript:;">themeforest.net</a></p>

									<div class="activityStreamActions">
										<a href="javascript:;">Comment</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;">Like</a>										
									</div>
								</td>						
							</tr>						
						</table>
					</div> <!-- .activityStreamRow -->

					<div class="activityStreamRow">
						<table class="activityTable">

							<tr>
								<td class="activityStreamAvatarTd">
									<img src="images/stream/defaultavatar_small.png" alt="Profile" />	
								</td>

								<td class="tdDetails">
									<p class="activityStreamWho"><a href="javascript:;">John Doe</a> shared an idea: <a href="javascript:;">Create an Awesome Admin Theme</a></p>

									<p class="streamAnswer"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

									<div class="activityStreamActions">
										<a href="javascript:;">Comment</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;">Like</a>										
									</div>
								</td>						
							</tr>						
						</table>
					</div> <!-- .activityStreamRow -->
				</div>								

				<div class="grid-8">
					<div id="gettingStarted" class="box">
						<h3>Getting Started</h3>

						<p>Completing your bio will bring you to 58%.</p>

						<div class="progress-bar secondary">
							<div class="bar" style="width: 42%;">42%</div>
						</div>

						<ul>
							<li><a href="javascript:;">Complete Your Profile</a></li>
							<li><a href="javascript:;">Add Your Photo</a></li>
							<li><a href="javascript:;">Invite Peoople to Join</a></li>
							<li><a href="javascript:;">Follow People</a></li>
						</ul>
					</div>

					<br />

					<h3>Project Members</h3>

					<ul class="projectMembersList">
					<li><a href="javascript:;" class="tooltip" title="John Doe"><img src="images/stream/defaultavatar_small.png" class="projectMember" alt="Profile" /></a></li>
					<li><a href="javascript:;" class="tooltip" title="Jane Doe"><img src="images/stream/defaultavatar_small.png" class="projectMember" alt="Profile" /></a></li>
					<li><a href="javascript:;" class="tooltip" title="John Doe"><img src="images/stream/defaultavatar_small.png" class="projectMember" alt="Profile" /></a></li>
					<li><a href="javascript:;" class="projectMemberAdd tooltip" title="Add Member">+</a></li>
					</ul>

					<br />

					<h3>Today's Task List</h3>

					<ul class="taskList">
						<li>
							<input type="checkbox" name="task" value="1" />
							Lorem ipsum dolor sit amet.							
						</li>
						<li>
							<input type="checkbox" name="task" value="1" />
							Aenean pharetra justo id libero.							
						</li>
						<li class="completed">
							<input type="checkbox" name="task" value="1" checked="checked" />
							Duis at lectus vel sem lobortis viverra.							
						</li>
						<li class="completed">
							<input type="checkbox" name="task" value="1" checked="checked" />
							Morbi in diam nulla, quis consectetur.							
						</li>
					</ul>

					<a href="javascript:;" class="btn btn-tertiary btn-small">Add Task</a>

					<br /><br /><br />
				</div>

				</div> <!-- .row -->
			
		</div> <!-- .container -->
		
	</div> <!-- #content -->
	
	<div id="topNav">
		 <ul>
		 	<li>
		 		<a href="#menuProfile" class="menu">John Doe</a>
		 		
		 		<div id="menuProfile" class="menu-container menu-dropdown">
					<div class="menu-content">
						<ul class="">
							<li><a href="javascript:;">Edit Profile</a></li>
							<li><a href="javascript:;">Edit Settings</a></li>
							<li><a href="javascript:;">Suspend Account</a></li>
						</ul>
					</div>
				</div>
	 		</li>
		 	<li><a href="javascript:;">Upgrade</a></li>
		 	<li><a href="index-2.html">Logout</a></li>
		 </ul>
	</div> <!-- #topNav -->
	
	<div id="quickNav">
		<ul>
			<li class="quickNavMail">
				<a href="#menuAmpersand" class="menu"><span class="icon-book"></span></a>		
				
						

				<div id="menuAmpersand" class="menu-container quickNavConfirm">
					<div class="menu-content cf">							
						
						<div class="qnc qnc_confirm">
							
							<h3>Confirm</h3>
					
							<div class="qnc_item">
								<div class="qnc_content">
									<span class="qnc_title">Confirm #1</span>
									<span class="qnc_preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</span>
									<span class="qnc_time">3 hours ago</span>
								</div> <!-- .qnc_content -->
								
								<div class="qnc_actions">						
									<button class="btn btn-primary btn-small">Accept</button>
									<button class="btn quaternary btn-small">Not Now</button>
								</div>
							</div>
							
							<div class="qnc_item">
								<div class="qnc_content">
									<span class="qnc_title">Confirm #2</span>
									<span class="qnc_preview">Duis aute irure dolor in henderit in voluptate velit esse cillum dolore.</span>
									<span class="qnc_time">3 hours ago</span>
								</div> <!-- .qnc_content -->
								
								<div class="qnc_actions">						
									<button class="btn btn-primary btn-small">Accept</button>
									<button class="btn btn-quaternary btn-small">Not Now</button>
								</div>
							</div>
							
							<div class="qnc_item">
								<div class="qnc_content">
									<span class="qnc_title">Confirm #3</span>
									<span class="qnc_preview">Duis aute irure dolor in henderit in voluptate velit esse cillum dolore.</span>
									<span class="qnc_time">3 hours ago</span>
								</div> <!-- .qnc_content -->
								
								<div class="qnc_actions">						
									<button class="btn btn-primary btn-small">Accept</button>
									<button class="btn quaternary btn-small">Not Now</button>
								</div>
							</div>
							
							<a href="javascript:;" class="qnc_more">View all Confirmations</a>
															
						</div> <!-- .qnc -->	
					</div>
				</div>
			</li>
			<li class="quickNavNotification">
				<a href="#menuPie" class="menu"><span class="icon-chat"></span></a>
				
				<div id="menuPie" class="menu-container">
					<div class="menu-content cf">					
						
						<div class="qnc">
							
							<h3>Notifications</h3>
					
							<a href="javascript:;" class="qnc_item">
								<div class="qnc_content">
									<span class="qnc_title">Notification #1</span>
									<span class="qnc_preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</span>
									<span class="qnc_time">3 hours ago</span>
								</div> <!-- .qnc_content -->
							</a>
							
							<a href="javascript:;" class="qnc_item">
								<div class="qnc_content">
									<span class="qnc_title">Notification #2</span>
									<span class="qnc_preview">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</span>
									<span class="qnc_time">3 hours ago</span>
								</div> <!-- .qnc_content -->
							</a>
							
							<a href="javascript:;" class="qnc_more">View all Confirmations</a>
							
						</div> <!-- .qnc -->
					</div>
				</div>				
			</li>
		</ul>		
	</div> <!-- .quickNav -->
	
	
</div> <!-- #wrapper -->

<div id="footer">
	Copyright &copy; 2012, MadeByAmp Themes.
</div>


<script src="javascripts/all.js"></script>

</body>
</html>